import "./homenew.css"
import { gethomenewData, gethomenewDatas } from "../../api/home"
import React, { useState } from "react"
import { Link, useNavigate } from "react-router-dom"
import { InfiniteScroll, List } from 'antd-mobile'

function Homenew() {
    let navigate = useNavigate();//链接跳转

    let [foodchoose, setFoodchoose] = React.useState(null);

    // 加载
    let [Num, AddNum] = React.useState(10)
    let [page, setPage] = React.useState(null)
    let [flag, Editflag] = React.useState(false)
    let [tabId, getTabid] = React.useState(7)

    let tabs = [
        {
            id: 7,
            img: "http://img.szzhangchu.com/1462847693264_6753686672.png",
            title: "食材选储"
        },
        {
            id: 100,
            img: "http://img.szzhangchu.com/1462765476030_7114284859.png",
            title: "食材处理"
        },
        {
            id: 8,
            img: "http://img.szzhangchu.com/1465006389038_3277876080.png",
            title: "手工自制"
        },
        {
            id: 9,
            img: "http://img.szzhangchu.com/1465031322357_5730856252.png",
            title: "烹饪技巧"
        },
        {
            id: 10,
            img: "http://img.szzhangchu.com/1465194419552_1662326453.png",
            title: "厨房神器"
        },
        {
            id: 11,
            img: "http://img.szzhangchu.com/1465200752185_5439128870.png",
            title: "食用保健"
        },
        {
            id: 12,
            img: "http://img.szzhangchu.com/1465203981137_1080155175.png",
            title: "变废为宝"
        },
        {
            id: 13,
            img: "http://img.szzhangchu.com/1465205789027_2706749662.png",
            title: "烘焙宝典"
        },
    ]

    //请求数据
    React.useEffect(() => {

        gethomenewData(tabId,Num).then(data => {
            // console.log(data.data.data);
            setFoodchoose(data.data.data)
            setPage(data.data.total)

        })
    }, [])

    function getData(id) {
        getTabid(id)
        if (id == 100) {
            gethomenewDatas(id, Num).then(data => {
                // console.log(data.data.data);
                setFoodchoose(data.data.data)
                setPage(data.data.total)
            })
        } else {
            gethomenewData(id, Num).then(data => {
                console.log(data.data);
                setFoodchoose(data.data.data)
                setPage(data.data.total)
            })
        }

    }

    const changeId = (id, e) => {
        e.preventDefault();
        getData(id);
    }

    return (
        <div className="homenew">
            {/* 顶部 */}
            <div className="top">
                <div className="left">
                    <i onClick={() => navigate("/")} className="iconfont icon-zuobian"></i>
                </div>
                <div>新手入门</div>
                <div className="right">
                    <span className="iconfont icon-sort"></span>
                </div>
            </div>

            {/* 顶部导航 tabs */}
            <div className="nav">

                <ul>
                    {
                        tabs.map(item => {
                            return (
                                <li key={item.id}>
                                    <a onClick={changeId.bind(this, item.id)} href="">
                                        <img src={item.img} />
                                        <span>{item.title}</span>
                                    </a>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>

            {/* 分类内容 */}
            <div className="goods-page">
            <List>
                <ul>
                    {
                        foodchoose && foodchoose.map(item => {
                            return (
                                <li key={item.id}>
                                    <Link to={"/detailsnew/" + item.id}>
                                        <div className="img">
                                            <img src={item.image} />
                                        </div>

                                        <div className="bottom">
                                            <div className="title">{item.title}</div>
                                            <p className="nub">浏览量：{item.views}</p>
                                        </div>
                                    </Link>
                                </li>
                            )
                        })
                    }
                </ul>
                </List>
                <InfiniteScroll loadMore={async () => {
                    setTimeout(() => {
                        Editflag(true)

                    }, 3000)
                    // console.log(flag);
                    Num += 3
                    AddNum(Num)
                    // console.log(Num);
                    if(tabId == 100){
                        await gethomenewDatas(tabId, Num).then(data => {
                            // console.log(data);
                            setFoodchoose(data.data.data)
    
                        })
                    }else{
                        await gethomenewData(tabId, Num).then(data => {
                            // console.log(data);
                            setFoodchoose(data.data.data)
    
                        })
                    }

                    setTimeout(() => {
                        Editflag(false)

                    }, 3000)


                }} hasMore={flag == false && Num < page}
                    threshold={50}
                />
            </div>
        </div>
    )
}

export default Homenew;